<template>
  <div>
    <top-header :isLeft="true" title="选择地址"></top-header>
    <div class="city_search">
      <a-input placeholder="小区/写字楼/学校等" v-model="search_val">
        <a-icon slot="prefix" type="search" />
      </a-input>
      <location :address="address" @clickCurrentLocation="selectAddress(address)" />
    </div>
    <div class="area">
      <ul class="area_list" v-for="(item, index) in areaList" :key="index">
        <li @click="selectAddress(item)">
          <h4>{{ item.name }}</h4>
          <p>{{ item.district }}{{ item.address }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import TopHeader from "../components/TopHeader.vue";
import Location from "../components/Location";
export default {
  data() {
    return {
      city: "", // 当前的城市
      search_val: "",
      areaList: [],
      add:''
    };
  },
  computed: {
    address() {
      return this.$store.getters.location.formattedAddress;
    },
      tempAddress(){
      return this.$store.getters.tempAddress;
    }
  },
  components: { TopHeader, Location },
  watch: {
    search_val() {
      this.searchPlace();
    },
  },
  methods: {
    searchPlace() {
      const self = this;
      AMap.plugin("AMap.Autocomplete", function() {
        // 实例化Autocomplete
        var autoOptions = {
          city: self.city,
        };
        var autoComplete = new AMap.Autocomplete(autoOptions);
        autoComplete.search(self.search_val, function(status, result) {
          // 搜索成功时，result即是对应的匹配数据
          self.areaList = result.tips;
        });
        // 无需再手动执行search方法，autoComplete会根据传入input对应的DOM动态触发search
      });
    },
    selectAddress(item) {
      // 设置地址
      if (item) {
        this.tempAddress.address = typeof item == "string" ? item : item.district + item.address + item.name;
        this.$router.push({
            name:'AddAddress',
 
            })
      }
    }
  },
  
};
</script>
<style lang="scss" scoped>
.address {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding-top: 45px;
}

.city_search {
    margin-top: 70px;
  background-color: #fff;
  padding: 10px 20px;
  color: #333;
}

.area {
  margin-top: 16px;
  background: #fff;
}
.area li {
  border-bottom: 1px solid #eee;
  padding: 8px 16px;
  color: #aaa;
}
.area li h4 {
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}
</style>
